<template>
  <div>
    <div 
         class="nav">
      <div class="nav-content">
        <el-row :gutter="20">
          <el-col :span="3">
            <router-link to="/">
              <img class="logo"
                   src="../assets/userimg.jpg"
                   alt="BiaoChenXuYing">
            </router-link>
          </el-col>
          <el-col :span="16">
            <el-menu :router="true"
                     :default-active="activeIndex"
                     active-text-color="#409eff"
                     class="el-menu-demo"
                     mode="horizontal"
                     @select="handleSelect">
              <el-menuItem :route="l.path"
                           :index="l.index"
                           v-for="l in list"
                           :key="l.index">
                {{l.name}}
              </el-menuItem>
            </el-menu>
          </el-col>
          <el-col v-if="userId"
                  :span="5">
            <div class="nav-right">
              <el-dropdown @command="handleLogout">
                <span class="el-dropdown-link">
                  {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <img v-if="userId"
                     class="user-img"
                     src="../assets/user.png"
                     alt="hi">
                <!-- <img v-if="userInfo.avatar"
                     class="user-img"
                     :src="userInfo.avatar"
                     alt="BiaoChenXuYing"> -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="/logout" @click="handleClick('/logout')">登 出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
          <el-col v-else
                  :span="4"
                 >
            <div class="nav-right">
              <el-button size="small"
                         type="primary"
                         @click="handleClick('/login')">登录</el-button>
              <el-button size="small"
                         type="danger"
                         @click="handleClick('/register')">注册</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <RegisterAndLogin :visible="visible" 
                      :handleFlag="handleFlag"
                       @ok="handleOk"
                      @handleCancel="handleCancel"></RegisterAndLogin>
  </div>
</template>
<script>
import RegisterAndLogin from "@/components/registerAndLogin.vue";

export default {
    name:'back',
   inject: ['reload'],
    data () {
        return{
            userName:'',
            userId:'',
            activeIndex:'0',
            list:[
                    {
                index: "1",
                path: "/",
                name: "首页"
              },
              {
                index: "2",
                path: "/article",
                name: "文章"
              },
              {
                index: "3",
                path: "/archive",
                name: "归档"
              },
              {
                index: "4",
                path: "/project",
                name: "项目"
              },
              {
                index: "5",
                path: "/timeline",
                name: "历程"
              },
              {
                index: "6",
                path: "/message",
                name: "留言"
              },
              {
                index: "7",
                path: "/about",
                name: "关于"
              }
            ],
            visible:false,
            handleFlag:'',
            isRouterAlice: true
        }
    },
    created(){
         var userId = this.getCookie('userID');
        var userName = this.getCookie('userName');
        this.userId = userId,
        this.userName = userName
         console.log( this.userId,  this.userName)
    },
    mounted(){
       this.routeChange(this.$route, this.$route);
      
       
    },
    methods:{
       handleClick(route)
        {
      if (route === "/login") {
          this.handleFlag = "login";
          this.visible = true;
          console.log( this.visible)
        }
      if (route === "/register") {
          this.handleFlag = "register";
          this.visible = true;
          console.log('您点击了注册按钮')
       }
       if (route === "/logout") {
          Console.log('点击了推出按钮')
        this.handleLogout();
      }
  },
  handleLogout(){
    console.log('退出')
    this.setCookie("userID", "", -1);
    window.location.reload()
  },
        handleCancel(value) {
         console.log(value)
         this.visible = value;
        },
        handleOk(value){
          this.visible = value;
        },
        handleSelect(val){
          this.activeIndex = val;
        },
       
        routeChange(val, oldVal){
          for (let i = 0; i < this.list.length; i++) {
                        const  l = this.list[i];
                        if (l.path === val.path) {
                          this.activeIndex = i + 1 + "";
                          this.title = l.name;
                          break;
                        }
                    }
        }
    },
    watch: {
      '$route' (val, oldVal) {
        console.log(this.list.length)
       for (let i = 0; i < this.list.length; i++) {
              const  l = this.list[i];
              if (l.path === val.path) {
                this.activeIndex = i + 1 + "";
                this.title = l.name;
                break;
              }
          }
      }
},
    components:{
        RegisterAndLogin,
       
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

.nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  .nav-content {
    width: 1200px;
    margin: 0 auto;
  }
  .logo {
    height: 50px;
    margin: 0;
    border-radius: 50%;
    margin-top: 5px;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-menu--horizontal > .el-menu-item {
    cursor: pointer;
    color: #333;
  }
  .nav-right {
    position: relative;
    padding-top: 15px;
    text-align: right;
    .el-dropdown {
      cursor: pointer;
      padding-right: 60px;
    }
    .user-img {
      position: absolute;
      top: -15px;
      right: 0;
      width: 50px;
      border-radius: 50%;
    }
  }
}

.enter-slideUp,
.leave-slideDown {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
}

.enter-slideUp {
  overflow: auto;
  visibility: visible;
  z-index: 1001;
  animation: slideUp 0.3s forwards;
}
.leave-slideDown {
  visibility: visible;
  z-index: 1001;
  animation: slideDown 0.3s forwards;
}
@keyframes slideUp {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0.1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}
.mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}
.mask-fade-out {
  animation: maskFadeOut 0.4s forwards;
}
@keyframes maskFadeOut {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0;
  }
}
</style>
